import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { DatePicker, Icon, Input } from 'antd'
import moment from 'utils/moment'
import { toast } from 'react-toastify'
import locale from 'antd/lib/date-picker/locale/zh_CN'
const { TextArea } = Input
moment.locale('zh')
class Item extends Component {
  constructor(props) {
    super(props) 
    const { date, userName, content, edited, id } = props
    this.state = {
      date: moment(new Date(date)),
      userName,
      oldContent: content,
      content,
      edited: !!edited,
      oldId: id,
      id,
      pending: false,
    }
  }
  activeEdited = () => {
    const { edited } = this.state
    !edited && this.setState({
      edited: true
    })
  }
  saveEdited = () => {
    this.setState({
      pending: true,
    })
    const { landId, saveFunc } = this.props
    const { content, date, id } = this.state
    const fd = new FormData()
    fd.append('infoStr', JSON.stringify({
      date: date.format('YYYY/MM/DD'),
      content,
      landId,
      id: id.length === 32 ? id : undefined,
    }))
    saveFunc(fd)
      .then(({ msg, result: { date, userName, content, id }}) => {
        if (msg === '200') {
          toast.success('保存成功')
          this.setState({
            date: moment(new Date(date)),
            userName,
            oldContent: content,
            content,
            edited: false,
            id,
            pending: false,
          })
        }
      }).catch(err => {
        toast.error('保存失败，请稍后重试')
        this.setState({
          pending: false,
        })
      })
  }
  contentChange = ({target: { value: content }}) => {
    this.setState({
      content
    })
  }
  dateChange = (date) => {
    this.setState({
      date
    })
  }
  cancel = () => {
    const { id, oldId, oldContent} = this.state
    if (id.length ===  32) {
      this.setState({
        content: oldContent,
        edited: false
      })
    } else {
      this.props.deleteItem(oldId)
    }
  }
  delete = () => {
    const { deleteFunc } = this.props
    const { id, oldId } = this.state
    const fd = new FormData()
    fd.append('id', id)
    deleteFunc(fd)
      .then(({msg, result}) => {
        if(msg === '200') {
          toast.success('删除成功')
          this.props.deleteItem(oldId)
        }
      }).catch(err => {
        toast.error('删除失败')
      })
  }
  render() {
    const { edited, date, userName, content, pending, id } = this.state
    return (
      <div className='item'>
        <div className='item-title'>
          <div className='date-user'>
            <span className='date'>
              {(edited && id.length !== 32) ? <DatePicker
                locale={locale}
                value={date}
                onChange={this.dateChange}
                placeholder='选择日期'
                size={'small'}
                format={'YYYY/MM/DD'}
              /> :date.format('YYYY/MM/DD')}
            </span>

            <span className='usr'>{userName}</span>
          </div>
          <div className='action'>
            {!edited ? <div className='edited' onClick={this.activeEdited}>
              <Icon type="edit" style={{ fontSize: '12px', color: '#fff' }} theme="outlined" />
              <span>编辑</span>
            </div> : <div className='save' onClick={this.saveEdited}>
              <Icon type="save" style={{ fontSize: '12px', color: '#fff' }} theme="outlined" />
              <span>保存{pending && <Icon type="loading" theme="outlined" />}</span>
            </div>}
            
            {!edited ? <div className='delete' onClick={this.delete}>
              <Icon type="delete" style={{ fontSize: '12px', color: '#fff' }} theme="outlined" />
              <span>删除</span>
            </div>: <div className='cancel' onClick={this.cancel}>
              <Icon type="rollback" style={{ fontSize: '12px', color: '#fff' }} theme="outlined" />
              <span>取消</span>
            </div>}
          </div>
        </div>
        <div className='item-content'>
          {edited ? <TextArea rows={4} value={content} onChange={this.contentChange}/>
            : <div className='contents'>{content}</div>}
        </div>
      </div>)
  }
}
Item.propTypes = {
  id: PropTypes.string,
  date: PropTypes.string,
  userName: PropTypes.string,
  content: PropTypes.string,
  landId: PropTypes.string,
  deleteFunc: PropTypes.func,
  saveFunc: PropTypes.func,
  edited: PropTypes.bool,
  deleteItem: PropTypes.func,
}
export default Item